<script setup lang="ts">
    import { useCategoryStore } from '@/stores/categoryStore';
    
      //用于获取存储分类状态的store对象
      const categoryStore = useCategoryStore();
      //用于获取存储路由信息的对象
      const route = useRoute()
      //获取当前页面的分类信息
      const target = computed(()=>
       categoryStore.currentTop(route.params.id as string)
      )
      
      
    </script>
     <!-- 
        为什么加 key ?
        动画执行的先决条件是元素的创建和销毁, 而每次导航切换时, 变化的只是 category.name, 
        元素是没有变化的, 加 key 就是为了让元素发生变化, 从而执行动画, 每个分类的 ID 都不一样,
        所以分类 ID 变化, 元素必定重新渲染
    -->
    <!-- 
      mode: 指定过渡模式
      默认情况下入场元素的动画和离场元素的动画是同时执行的, 通过过渡模式可以更改这一默认行为
      in-out: 入场元素的动画先执行, 离场元素的动画后执行
      out-in: 离场元素的动画先执行, 入场元素的动画后执行
    -->
    <template>
       <XtxBread>
        <XtxBreadItem   path="/">首页</XtxBreadItem>
        <transition name="fade-right" mode="out-in"> 
            <XtxBreadItem  :key="target?.id">{{ target?.name }}</XtxBreadItem>
        </transition>
       </XtxBread>
    </template>